<!--
 * @Author: zxh
 * @Email: 1271027008@qq.com
 * @Date: 2020-06-01 10:04:05
 * @Descripttion: 
--> 
<div class="right_dictionary">
    <div nz-row class="row_1">
        <span>字典详情</span>
        <button nz-button nzType="primary" nzSize="small" (click)="handleShowDetailModal()" *ngIf="bornRole.add" [disabled] = "detailParentId === -1 ">
            <i nz-icon nzType="plus"></i>新增
        </button>
    </div>
    <div nz-row class="row_2">
        <div nz-col nzSpan="20">
            <input appHotSearch (hotSearchEmit)="hotSearch()" nz-input placeholder="输入字典标签查询" [(ngModel)]="searchKey" />
        </div>
        <!-- <div nz-col nzSpan="3" class="operate_btn">
            <button nz-button nzType="" (click)="handleSearch()">
                <i nz-icon nzType="search"></i>搜索
            </button>
        </div> -->
    </div>
    <div nz-row class="row_3">
        <nz-table #rowSelectionTable [nzData]="detailData" nzSize="small" [nzFrontPagination]="false" [nzBordered]="true">
            <thead>
                <tr>
                    <th>所属字典</th>
                    <th>字典标签</th>
                    <th>字典值</th>
                    <th>排序</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let data of rowSelectionTable.data">
                    <td>{{ detailParentName }}</td>
                    <td>{{ data.label }}</td>
                    <td>{{ data.value }}</td>
                    <td>{{ data.sort }}</td>
                    <td>
                        <button nz-button nzType="primary" style="margin-right: 4px;" (click)="handleEdit(data)" *ngIf="bornRole.edit">
                            <i nz-icon nzType="edit"></i>
                        </button>
                        <button nz-button nzType="danger" (click)="handleDeleteModal(data.id)" *ngIf="bornRole.del">
                            <i nz-icon nzType="delete"></i>
                        </button>
                    </td>
                </tr>
            </tbody>
        </nz-table>
    </div>
    <div nz-row class="row_4">
        <div nz-col class="page_box">
            <nz-pagination [nzPageIndex]="detailPage" [nzTotal]="detailCount" [nzPageSize]="pageSize"
                (nzPageIndexChange)="pageChange($event)" [nzShowTotal]="totalTemplate"></nz-pagination>
            <ng-template #totalTemplate let-total> 总共 {{ detailCount }} 条 </ng-template>
        </div>
    </div>
</div>
<div id="modal_box_2"></div>
<nz-modal nzMaskClosable="false" appDragModal [nzGetContainer]="modalDomBox" [(nzVisible)]="isDetailVisible" [nzTitle]="detailId===-1?'新增字典详情':'编辑字典详情'" (nzOnCancel)="handleDetailCancel()" [nzFooter]="null" class="hmodal">
    <form nz-form class="detail_form" [formGroup]="detailValidateForm" (ngSubmit)="handleDetailSubmit()">
        <div nz-row>
            <div nz-col nzSpan="24">
                <nz-form-item>
                    <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired>字典标签</nz-form-label>
                    <nz-form-control [nzSm]="20" [nzXs]="24" nzErrorTip="请输入字典详情标签">
                        <input nz-input formControlName="detailLabel" [(ngModel)]="detailLabel"
                            placeholder="请输入字典详情标签" />
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired>字典值</nz-form-label>
                    <nz-form-control [nzSm]="20" [nzXs]="24" nzErrorTip="请输入字典值">
                        <input nz-input formControlName="detailValue" [(ngModel)]="detailValue" placeholder="请输入字典值" />
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired>排序</nz-form-label>
                    <nz-form-control [nzSm]="20" [nzXs]="24" nzErrorTip="请输入排序">
                        <!-- <nz-input-number formControlName="detailSort" [(ngModel)]="detailSort" placeholder="请输入排序"
                            [nzMin]="1" [nzMax]="10" [nzStep]="1"></nz-input-number> -->
                        <input nz-input type="number" formControlName="detailSort" max="10" min="1"/>
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
        <div nz-row class="custome_modal_footer">
            <div nz-col nzSpan="24" style="text-align: right;">
                <button nz-button type="button" nzType="default" (click)="handleDetailCancel()">取消</button>
                <button nz-button nzType="primary" [nzLoading]="isDetailOkLoading">确定</button>
            </div>
        </div>
    </form>
</nz-modal>